<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
    .box{
        border:1px dashed red;
        width:300px;
        margin: 10px auto;
    }
    li { display: inline-block;}
    </style>   
</head>
<body>
    <h1>父组件--->子组件传递信息 </h1>
    设计一个博客组件
    要求 标题，作者，正文,日期，
    图片列表 当做参数传入  
    加个边框样式 class='box'
    <div id="app">
        <blog :list="bloglist"></blog>
    </div>
</body>
<script>
 
Vue.component('blog',{
    props:['list'],
    template:`<div>
             <div class='box' v-for="b in list" :key="b.id">
                <h3>{{b.title}}</h3>
                <p>{{b.date}}</p>
                <ul>
                    <li v-for='tu in b.imgs'>
                        <img width="50" :src="'../img/'+tu" />
                    </li>
                </ul>
             </div>
        </div>`
});

var vm = new Vue({
    el: '#app',
    data: {     
        bloglist: [
            { id: 1, title: 'AAA' ,date:'2022-3-1',imgs:['1.png','2.png','3.png'] },
            { id: 2, title: 'BBB' ,date:'2022-3-2',imgs:['1.png','3.png'] },
            { id: 3, title: 'CCC' ,date:'2022-3-3',imgs:['1.png'] },
        ]
    }
});



</script>
</html>